<template>
   <div id="app">
      <div v-if="is_show_waiting" class="pass_change_finish">请稍后...</div>
      <div v-else>
         <div class="register_con">
            <div class="l_con fl">
               <a href="/" class="reg_logo"><img src="/static/images/logo.png"></a>
               <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
               <div class="reg_banner"></div>
            </div>

            <div class="r_con fr">
               <div class="reg_title clearfix">
                  <h1>绑定用户</h1>
               </div>

               <div class="reg_form clearfix" v-cloak>
                  <form id="reg_form" @submit.prevent="on_submit">
                     <input v-model="uid" type="hidden" name="uid">
                     <ul>
                        <li>
                           <label>手机号:</label>
                           <input type="text" v-model="phone" @blur="check_phone" name="phone" id="phone">
                           <span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
                           <span v-show="error_cphone" class="error_tip1">{{ error_phone_message }}</span>
                        </li>
                        <li>
                           <label>密码:</label>
                           <input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd">
                           <span v-show="error_password" class="error_tip">{{ error_pwd_message }}</span>
                           <span v-show="error_cpassword" class="error_tip1">{{ error_pwd_message }}</span>
                        </li>
                        <li>
                           <label>图形验证码:</label>
                           <input type="text" v-model="image_code" @blur="check_image_code" name="image_code"
                                  id="pic_code" class="msg_input">
                           <img :src="'http://127.0.0.1:8000/userapp/image/?image_id='+image_id"
                                @click="generate_image_code" alt="图形验证码" class="pic_code">
                           <span v-show="error_image" class="error_tip">{{ error_image_code_message }}</span>
                           <span v-show="error_image_code" class="error_tip1">{{ error_image_code_message }}</span>
                        </li>
                        <li>
                           <label>短信验证码:</label>
                           <input type="text" v-model="phone_code" @blur="check_sms_code" name="msg_code" id="msg_code"
                                  class="msg_input">
                           <a href="javascript:;" @click="send_sms_code" class="get_msg_code">获取短信验证码</a>
                           <span v-show="error_sms" class="error_tip">{{ error_sms_code_message }}</span>
                           <span v-show="error_sms_code" class="error_tip1">{{ error_sms_code_message }}</span>
                        </li>
                        <li class="reg_sub">
                           <input type="submit" value="保 存" name="">
                        </li>
                     </ul>
                  </form>
               </div>
            </div>
         </div>
         <BaseBodyer></BaseBodyer>
      </div>
   </div>
</template>

<script>
   import BaseBodyer from "../Header/BaseBodyer";

   export default {
      name: "Oauth_callback",
      components: {
         BaseBodyer,
      },
      data() {
         return {
            is_show_waiting: true,
            uid: '',
            phone: '',
            password: '',
            image_code: '',
            phone_code: '',


            error_phone: '',
            error_cphone: '',
            error_password: '',
            error_cpassword: '',
            error_image: '',
            error_image_code: '',
            error_sms_code: '',
            error_sms: '',
            error_phone_message: '',
            error_pwd_message: '',
            error_image_code_message: '',
            error_sms_code_message: '',
            image_id: '',
            phone_id: '',
         }
      },
      methods: {
         on_submit() {
            if (this.error_cpassword && this.error_cphone && this.error_sms_code && this.error_image_code) {
               this.$axios({
                  url: 'userapp/oauth/',
                  method: 'PUT',
                  data: {
                     uid: this.uid,
                     phone: this.phone,
                     password: this.password,
                  }
               }).then(resp => {
                  console.log(resp.data)
               }).catch(error => {
                  console.log(error)
               })
            } else {
               this.check_pwd();
               this.check_sms_code();
               this.check_image_code();
               alert('请填写正确的必要信息')
            }

         },
         check_phone() {
            let re = /^1[345789]\d{9}$/;
            if (re.test(this.phone)) {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'GET',
                  params: {
                     phone: this.phone
                  }
               }).then(resp => {
                  this.error_phone_message = resp.data.msg;
                  if (resp.data.code === 200) {
                     return 1
                  } else if (resp.data.code === 400) {
                     return 0
                  }
               }).catch(error => {
                  console.log(error)
               });
               this.error_phone = false;
               this.error_cphone = true;
               this.error_phone_message = '验证通过';
            } else {
               this.error_phone = true;
               this.error_cphone = false;
               this.error_phone_message = '您输入的手机号格式不正确';
            }
         },
         check_pwd() {
            // 密码校验
            this.check_phone();
            let re = /^\w{3,18}&/;
            if (re.test(this.password) || this.password.length <= 6 && this.password.length >= 3) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 弱'
            } else if (re.test(this.password) || this.password.length <= 12 && this.password.length > 6) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 中'
            } else if (re.test(this.password) || this.password.length <= 18 && this.password.length > 12) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 强'
            } else {
               this.error_password = true;
               this.error_cpassword = false;
               this.error_pwd_message = '请输入3-18位的密码'
            }
         },
         check_image_code() {
            // 图片验证码校验
            if (!this.image_code) {
               this.error_image = true;
               this.error_image_code = false;
               this.error_image_code_message = '请填写图片验证码';
            } else {
               this.$axios({
                  url: 'userapp/image/',
                  method: 'PUT',
                  data: {
                     image_id: this.image_id,
                     image_code: this.image_code
                  }
               }).then(resp => {
                  if (resp.data.code === 200) {
                     this.error_image = false;
                     this.error_image_code = true;
                     this.error_image_code_message = resp.data.msg;
                  } else {
                     this.error_image = true;
                     this.error_image_code = false;
                     this.error_image_code_message = resp.data.msg;
                  }
               })
            }
         },
         generate_image_code() {
            // 生成 uuid 请求图片验证码
            this.$axios({
               url: 'userapp/uuid/',
               method: 'GET',
            }).then(resp => {
               if (resp.data.code === 200) {
                  this.image_id = resp.data.uuid_code;
               }
            })
         },
         generate_phone_code() {
            // 生成 uuid 用来储存手机号验证码
            this.$axios({
               url: 'userapp/uuid/',
               method: 'GET',
            }).then(resp => {
               if (resp.data.code === 200) {
                  this.phone_id = resp.data.uuid_code;
               }
            })
         },
         check_sms_code() {
            // 手机号验证码校验
            if (!this.phone_code) {
               this.error_sms_code_message = '请填写短信验证码';
               this.error_sms = true;
               this.error_sms_code = false;
            } else {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'PUT',
                  data: {
                     phone_id: this.phone_id,
                     phone_code: this.phone_code,
                  }
               }).then(resp => {
                  if (resp.data.code === 200) {
                     this.error_sms = false;
                     this.error_sms_code = true;
                     this.error_sms_code_message = resp.data.msg;
                  } else {
                     this.error_sms = true;
                     this.error_sms_code = false;
                     this.error_sms_code_message = resp.data.msg;
                  }
               }).catch(error => {
                  console.log(error)
               })
            }
         },
         send_sms_code() {
            // 手机号验证码发送
            if (this.error_cphone) {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'POST',
                  data: {
                     phone: this.phone,
                     phone_id: this.phone_id
                  }
               }).then(resp => {
                  alert(resp.data.msg)
               })
            } else {
               this.check_phone();
            }
         },
      },
      created() {
         this.$axios({
            url: 'userapp/oauth/',
            method: 'GET',
            params: {
               code: this.$route.query.code
            }
         }).then(resp => {
            if (resp.data.code === 300) {
               this.is_show_waiting = false
               this.uid = resp.data.uid;
            }else{
               sessionStorage.setItem('name', resp.data.name);
               sessionStorage.setItem('token', resp.data.token);
               sessionStorage.setItem('access_token', resp.data.access_token);
               this.is_show_waiting = true;
               this.$router.push('/user_info');
            }
         });
         this.generate_image_code();
         this.generate_phone_code();
      },
      computed: {},
      filters: {},
      watch: {},
   }
</script>

<style scoped>

</style>
